<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html >
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>生产过程信息系统-主页</title>
    <link rel="stylesheet" href="../static/mint-ui/style.min.css">

    <style type="text/css">

        html {
            font-size: 100px;
            height: 100%;
        }

        body {
            height: 100%;
            padidng: 0;
            margin: 0;
            background-color: #F5F5F5;
            font-size: 0.16rem;
        }

        .my-card {
            font-size: 0.14rem;
            margin: 0.1rem;
            padding: 0 0.1rem 0 0.1rem;
            border-radius: 0.08rem;
            border: 0.01rem solid #DDDDDD;
            box-shadow: 0.00rem 0.00rem 0.1rem 0.00rem #DDDDDD;
            /*
             */
            /* color:#70706F; */
            background-color: #FFFFFF;
        }

        .my-card-title {

            display: flex;
            flex-direction: row;
            justify-content: space-between;

            padding: 0.09rem 0 0.07rem 0;
            border-bottom: 0.01rem solid #EEEEEE;
            margin-bottom: 0.04rem;

            color: #OOOOOO;

        }

        .my-card-opr {

            border-top: 0.01rem solid #EEEEEE;
            margin-top: 0.04rem;

            text-align: right;
            padding: 0.06rem 0 0.06rem 0;
        }

        .my-card-content {

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;

            color: #70706F;

        }

        .my-card-content > div {
            display: flex;
            flex-direction: row;
            width: 46%;
            padding: 0.04rem 0 0.04rem 0;

        }

        .my-card-content-label {
            width: 0.5rem;
        }

        .my-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 0.4rem;
        }

        .my-navbar {
            position: fixed;
            top: 0.4rem;
            left: 0;
            width: 100%;
            height: 0.46rem;
        }
    </style>

</head>
<body>
<div id="app" class="my-container">
    <mt-header fixed title="生产过程信息系统" :style="{height:'0.4rem'}"></mt-header>
    <div class="my-navbar">

        <mt-navbar v-model="selected" :style="{height:'0.46rem'}">
            <mt-tab-item id="dye-undyed">待染色</mt-tab-item>
            <mt-tab-item id="dye-dyed">已染色</mt-tab-item>
            <mt-tab-item id="dye-afterDyed">后工序</mt-tab-item>
        </mt-navbar>
    </div>


    <!-- tab-container -->
    <mt-tab-container v-model="selected" ref="dyeTabContainer"
                      :style="{position:'fixed',top:'0.88rem',bottom:'0.02rem',width:'100%',overflow:'scroll'}">
        <mt-tab-container-item id="dye-undyed">

            <mt-loadmore @bottom-status-change="undyedBottomStatusChange" :auto-fill="undyedAutoFill" :top-method="undyedLoadTop" :bottom-method="undyedLoadBottom"
                         :bottom-all-loaded="undyedAllLoaded" ref="undyeLoadmore">

                <div class="my-card" v-for=" pro in undyePage.list ">

                    <div class="my-card-title">
                        <div>组号 {{ pro.process_id }}</div>
                        <div>待染色</div>
                    </div>

                    <div class="my-card-content">
                        <div>
                            <div class="my-card-content-label">客户</div>
                            <div>{{ pro.process_cus }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">规格</div>
                            <div>{{ pro.process_std }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">花色号</div>
                            <div>{{ pro.process_color }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">投坯</div>
                            <div>{{ pro.group_num }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">前处理</div>
                            <div>{{ pro.pretreat_num }}</div>
                        </div>
                    </div>
                    <div class="my-card-opr">
                        <mt-button type="danger" size="small" @click.prevent="finish(pro.process_id)">完成染色</mt-button>
                    </div>

                </div>

                </mt-loadmore>

        </mt-tab-container-item>


        <mt-tab-container-item id="dye-dyed">
            <mt-cell v-for="n in 4" :title="'content ' + n"/>
        </mt-tab-container-item>
        <mt-tab-container-item id="dye-afterDyed">
            <mt-cell v-for="n in 6" :title="'content ' + n"/>
        </mt-tab-container-item>
    </mt-tab-container>

</div>


<script type="text/javascript" src="../static/js/vue-2.5.16.min.js"></script>
<script type="text/javascript" src="../static/js/axios.min.js"></script>
<script type="text/javascript" src="../static/mint-ui/index.js"></script>


<script type="text/javascript">

    new Vue({
        el: '#app',//容器
        data: {//数据绑定
            selected: 'dye-undyed',
            undyePage: {},
            undyedAllLoaded: false,
            undyedAutoFill: false,

        },
        methods: {//方法


            undyedBottomStatusChange(status){
                console.log(status);
                if(status=='pull'){
                    console.log(this.$refs.dyeTabContainer);
                }
                //
            },


            //url,page,limit,status [地址，页码，每页大小，状态]
            loadUndyedData(url, page, limit, status) {//加载指定页码数据

                let _this = this;

                this.undyedAllLoaded = true;//执行加载数据前一定要设为TRUE，阻止其自动不停加载
                axios.get(url, {
                    params: {
                        process_status: status,
                        page: page,
                        limit: limit

                    }
                })
                    .then(function (response) {
                        console.log(response);
                        _this.undyePage = response.data;

                        if(_this.undyePage.hasNextPage){
                            //当前页若不是最后一页，设置该属性为false
                            _this.undyedAllLoaded = false;
                        }


                    })


                    .catch(function (error) {
                        console.log(error);
                    });


            },


            undyedLoadTop() {//下拉加载上一页数据


                this.loadUndyedData('m_dye', this.undyePage.prePage, 5, '10');
                // 加载更多数据
                this.$refs.undyeLoadmore.onTopLoaded();


            },
            undyedLoadBottom() {
                this.loadUndyedData('m_dye', this.undyePage.nextPage, 5, '10');
                // // 加载更多数据
                // //     this.allLoaded = true;// 若数据已全部获取完毕
                this.$refs.undyeLoadmore.onBottomLoaded();
            },


            finish(process_id){
                let _this= this;
                _this.$messagebox.prompt('请输入已染色数').then(({ value, action }) => {
                    axios.put('m_dye/'+process_id, {
                        dye_num: value
                    })
                        .then(function (response) {
                            let  data =response.data;
                            if(data.success){
                                let instance= _this.$toast({
                                    message: data.message,
                                    iconClass: 'mint-toast-icon mintui mintui-success'
                                });
                                //1000毫秒后关闭，并进入home页
                                setTimeout(() => {
                                    instance.close();
                                    _this.loadUndyedData('m_dye', _this.undyePage.pageNum, 5, '10');
                                }, 500);


                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                });
            }



        },


        //回调函数（Vue对象挂在界面完成时）
        mounted() {
            this.loadUndyedData('m_dye', 1, 5, '10');
        },

        //回复滚动条置顶
        updated(){
            this.$refs.dyeTabContainer.$el.scrollTop=0;
        }





    });

</script>
</body>
</html>
